 <!--
 * @Description: 校园品牌说入口
 * @Author: liyujie
 * @Date: 2021/03/04
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/03/04
-->
<template>
    <div class="container">
        <div class="container-wrap">
            <!-- header -->
            <div class="header">
                <p class="header-title">
                    校园品牌说
                </p>
                <div class="header-wrap">
                    <div
                        v-for="(item,index) in dataList"
                        :key="index"
                        :class="active_menu == index ? 'wrap-list-active' : 'wrap-list'"
                        @click="active_menu = index"
                    >
                        <img
                            src="@/assets/image/zd-menu-bage.png"
                            class="wrap-list-bg"
                            v-if="active_menu == index"
                        >
                        <p class="wrap-list-text">
                            {{ item.title }}
                        </p>
                    </div>
                </div>
            </div>

            <!-- content -->
            <div class="main">
                <zd-websit-brand v-if="active_menu === 0"/>
                <student-websit-brand v-if="active_menu === 1"/>
            </div>
        </div>
    </div>
</template>

<script>
import ZdWebsitBrand from "./zd-websit-brand";
import StudentWebsitBrand from "./student-websit-brand";
export default {
    components: {ZdWebsitBrand,StudentWebsitBrand},
    data () {
        return {
            active_menu: 0,
            dataList: [{
                title: '商家-校园品牌说',
                name: 'zdWebsitBrand'
            },
            {
                title: '学生-校园品牌说',
                name: 'studentWebsitBrand'
            }],
            authResult: {}
        };
    },
    watch: {
        '$route': {
            handler: 'resetData',
            immediate: true
        }
    },
    created () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: 'banner'}]);
    },
    mounted () {
        let query = this.$route.query;

        this.active_menu = query.tab ? Number(query.tab) : 0;
        this.authResult = this.$route.meta.authResult;
    },
    methods: {
        /**
         * 监听路径变化
         */
        resetData (val) {
            this.dataList.forEach((element, index) => {
                if(element.name == val.name) {
                    this.active_menu = index;
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-bottom: 10px;
    &-wrap {
        display: flex;
        flex: 1;
        flex-direction: column;
        .header {
            margin: 12px;
            height: 110px;
            background: #ffffff;
            overflow: hidden;
            .header-title {
                color: #333333;
                font-size: 20px;
                height: 20px;
                font-weight: 500;
                position: relative;
                margin: 24px 0 24px 35px;
                &::before {
                    content: '';
                    position: absolute;
                    left: -8px;
                    top: -1px;
                    width: 3px;
                    height: 20px;
                    background: #1890FF;
                }
            }
            .header-wrap {
                width: 100%;
                height: 42px;
                margin-left: 24px;
                display: flex;
                align-items: center;
                cursor: pointer;
                .wrap-list {
                    width: 180px;
                    height: 42px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #999999;
                    font-size: 18px;
                    background: #ffffff;
                    position: relative;
                }
                .wrap-list-active {
                    width: 180px;
                    height: 42px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 18px;
                    color: #1890FF;
                    font-weight: 500;
                    position: relative;
                    // background: #F0F2F5;
                    // border-radius: 8px 8px 0 0;
                    &::after {
                        content: '';
                        position: absolute;
                        width: 108px;
                        height: 1px;
                        background: #1890FF;
                        bottom: 0;
                        left: 36px;
                    }
                }
                .wrap-list-bg {
                    width: 180px;
                    height: 42px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 0;
                }
                .wrap-list-text {
                    position: absolute;
                    z-index: 1;
                }
            }
        }
        .main {
            flex: 1;
            margin: 0 12px;
            background: #ffffff;
        }
    }
}
</style>
